import React, { useState } from "react";
import ChooseItem from "./ChooseItem";
import { Button, Toast } from "antd-mobile";
import { questionTypeMapData } from "@/utils/utils";

interface IProp {
  item: Question;
}

export default function Choose({ item }: IProp) {
  // 把答案的json字符串。转换为数组
  const answerList: OptionData[] = JSON.parse(item.optionContent as string);

  // 点击答案选项效果的思路：
  // 目标： 点击答案选项，控制勾选的图片是否显示
  // 思路： 1. 在choose 组件存一个数组，数组里面是ABCD
  // 2. 父传子，通过 [ABCD] 控制 图片的显示和隐藏
  // 3. 点击选项，把当前的选项进行修改
  // 3.1 如果是单选 ， 把答案直接替换
  // 3.2 如果是多选 ， 把答案添加到答案数组里面 ， 或者，如果已经是选中状态， 把答案删除
  const [answers, setAnswers] = useState<string[]>([]);

  const changeAnswer = (value: string) => {
    // 如果是单选
    if (item.questionType !== "many") {
      setAnswers([value]);
    } else {
      // 如果是多选
      if (answers.includes(value)) {
        // 这个方式不好 ， 当数据越多 越不好
        // answers.filter(item=>item !== value)
        // 把答案删除
        let index = answers.indexOf(value);
        answers.splice(index, 1);
        setAnswers([...answers]);
      } else {
        setAnswers([...answers, value]);
      }
    }
  };

  const sure = () => {
    // 在前端对比答案，提示正确与否 ， 但是在对比之间需要先做一个排序
    if (answers.sort().join(",") === item.analysis) {
      Toast.show({
        icon: "success",
        content: "回答正确",
      });
    } else {
      Toast.show({
        icon: "fail",
        content: "回答错误",
      });
    }
    // 把参考答案显示出来
    // 把用户的答案发给后端
  };

  return (
    <div className="choose">
      <div className="flex">
        <div className="type">{questionTypeMapData[item.questionType]}</div>
        <div className="title">{item.title}</div>
      </div>
      {/* <ChooseItem /> */}
      {/* 把选择题目的选项展示出来 */}
      {answerList.map((item) => (
        <ChooseItem
          key={item.key}
          data={item}
          answers={answers}
          onChange={changeAnswer}
        />
      ))}
      <div>
        <Button color="primary" fill="outline" onClick={sure}>
          确定
        </Button>
      </div>
      <div>{/* 答案 */}</div>
    </div>
  );
}
